<template>
  <div class="p1755225391 p1755505832 p1755573350">
    <image class="bg" mode="scaleToFill" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/09673202508121156597608.png" :style="{ width: `100vw`, top: (statusBarHeight - 1) + 'px' }" />
    <div style="position: relative;z-index: 2;">
      <u-my-layOut :navbarOption="{ leftText: routeQuery.type == 4 ? '宠物帮喂' : '宠物帮溜', bgColor: 'rgba(255,255,255,0)', title: '' }" :color="{ statusBarHeightColor: '#f6a5ac' }">
        <template v-slot:header></template>
        <template v-slot:main>
          <div class="p1755227512 pb30">
            <div class="p1755226696">
              <div class="p1755226834">
                <div class="fz36" style="font-weight: bold;">需求信息</div>
                <uv-textarea border="none" maxlength="50" v-model="form.describe" class="p1755226278" placeholder="填写具体信息，如宠物类型，喂养时间和其他要求，描述越详细，接单越快"></uv-textarea>
                <div class="f  p1755848584">
                  <uv-upload @delete="deletePic" @afterRead="afterRead" style="line-height:1;" :fileList="fileList" name="6" :maxCount="3">
                    <div class="p1756879768 fac jcc">
                      <uv-icon size="70rpx" color="#979898" name="camera"></uv-icon>
                      <div class="fz28 pt10 p1755249485" style="line-height:1;color: #979898;">上传宠物照片</div>
                    </div>
                  </uv-upload>
                </div>
              </div>
            </div>
            <div class="p1755235396">
              <div class="cell">
                <div class="fac">
                  <div class="p1755847659 fac">
                    <uv-icon size="38rpx" color="#333" name="map"></uv-icon>
                  </div>
                  <div class="showText" v-if="form.storey">
                    <div style="color: #333333;" class="text-1 fz34 single-line">{{ form.storey }} &nbsp;
                      &nbsp;{{ form.house_number }}</div>
                    <div style="color: #ADADAE;" class="text-2 fz30 pt10 single-line">{{ form.name }} &nbsp; &nbsp;{{ form.tel}}</div>
                  </div>
                  <div v-else class="fz32" style="line-height: 1">服务地址</div>
                </div>
                <div @click="dzbTab" class="dzb p1755579751">地址簿</div>
              </div>
              <div class="fac p1755235189 jcsb">
                <div class="fac p1755939371">
                  <div class=" p1755847659 fac">
                    <uv-icon class="" size="32rpx" color="#333" name="clock"></uv-icon>
                  </div>
                  <div class="fz32" style="line-height: 1">上门时间</div>
                </div>
                <div class="fac" style="line-height: 1;" @click="qjsjTap">
                  <div style="text-align: right;" class=" fz32">{{ form.showTimeText || '及时上门' }}</div>
                  <uv-icon size="36rpx" color="#818181" name="arrow-right"></uv-icon>
                </div>
              </div>
              <div class="f">
                <div class="p1755847659 fac">
                  <uv-icon size="40rpx" color="#333333" class="" name="file-text"></uv-icon>
                </div>
                <uv-textarea maxlength="50" v-model="form.remarks" count placeholder="备注其他信息"></uv-textarea>
              </div>

            </div>
            <div class="p1755248415 bfff">
              <div class="fac jcsb pb20 p1755248366">
                <div class="fz32">订单金额</div>
                <div>¥{{ form.orderPrice || 0 }}</div>
              </div>
              <div class="fac jcsb ">
                <div class="fz32">赏金</div>
                <div class="p1755148552" @click="$refs.keyboard.open()">
                  <uv-input readonly v-model="form.bounty" placeholder="填写赏金金额" border="none" inputAlign="right"></uv-input>
                </div>
              </div>
            </div>
            <div style="color:#979898" class="pt20 pb30 fz28">注:若产生其他费用或发生其他情况与平台无关</div>
            <u-lstbsxy @xyChange="xyClick" @isChoose="isChooseChange"></u-lstbsxy>
            <div style="height: 20rpx"></div>
          </div>
        </template>
        <template v-slot:footer>
          <div class="p1755570852">
            <div class="fac">
              <div class="fz34">合计：</div>
              <div class="fac" style="color: #DE0012;">
                <div class="fz32">¥</div>
                <div style="font-size: 46rpx;">{{ totalPrice }}</div>
              </div>
            </div>
            <div @click="submitOrderTap" class="p1755152277">提交订单</div>
          </div>
        </template>
      </u-my-layOut>
    </div>
    <u-keyboard @confirmTap="keyboardConfirm" ref="keyboard" :tipsValue="form.bounty"></u-keyboard>
    <uv-popup ref="popup1" @change="closeChange" :closeable="true" mode="bottom" :close-on-click-overlay="false">
      <div class="p1755159289 " style="font-weight: bold;font-size: 38rpx;color: #333333;">选择取件时间</div>
      <div class="p1755748224">
        <div style="height: 60vh;">
          <u-timePopup ref="timePopupVue"></u-timePopup>
        </div>
        <div @click="timeTap" class="p1755160673">确定</div>
      </div>
    </uv-popup>
    <uv-popup closeable ref="payPopup" mode="bottom" @change="payTypeClose" :close-on-click-overlay="false">
      <div>
        <u-pay @payChange="payClick" ref="payVue"></u-pay>
      </div>
    </uv-popup>
    <uv-popup ref="popPwdRef" mode="center" @change="popPwdChange" round="10" :close-on-click-overlay="false" closeable>
      <div class="pay-pop">
        <div class="p1755763657">输入密码</div>
        <div class="p1755763837">
          <uv-input placeholder="请输入支付密码" type="password" border="surround" v-model="paymentForm.password"></uv-input>
        </div>
        <div @click="confirmPaymentTap" class="p1755763584">确认支付</div>
      </div>
    </uv-popup>
  </div>
</template>

<script>
import timePopupVue from '@/components/timePopup.vue'
import keyboardPopupVue from '@/components/keyboardPopup.vue'
import lstbsxyVue from '@/components/lstbsxy.vue'
import tjddVue from '@/components/tjdd.vue'
import payVue from '@/components/pay.vue'
import {
  uploadImage,
  calculateFee,
  neighborWorkerProfileCreateOrder,
  confirmPayment
} from '@/api'
import {
  generateRangesUntilMidnight,
  formatDateCustom
} from '@/util/tools.js'
import payMixin from './mixin/payMixin.js'
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    'u-timePopup': timePopupVue,
    'u-keyboard': keyboardPopupVue,
    "u-my-layOut": myLayOutVue,
    'u-pay': payVue,
    'u-lstbsxy': lstbsxyVue,
    'u-tjdd': tjddVue
  },
  mixins: [payMixin],
  data() {
    return {
      show: true,
      keyboardNumber: 0,
      copyForm: {},
      paymentForm: {
        order_id: null,
        pay_type: null,
        password: null,
      },
      form: {
        describe: null,
        bounty: null,
        date: null,
        showTimeText: ''
      },
      ZForm: {},
      info: uni.getSystemInfoSync(),
      activeIndex: 0,
      routeQuery: {},
      tabList: [{
        text: '在指定店铺购买'
      }, {
        text: '骑手就近购买'
      }],
      fileList: [],
      chooseFlag: true,
      date: 1,
      isOnShow: false,
      statusBarHeight: 0
    }
  },
  computed: {
    totalPrice() {
      return Number(this.form.orderPrice || 0) + Number(this.form.bounty || 0)
    }
  },
  onShow() {
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {

    }
    if (this.isOnShow) {
      this._showInit()
    }
  },
  onHide() {
    this.isOnShow = true
  },
  onLoad(options) {
    if (options) this.routeQuery = options
    this._showInit()

  },

  methods: {
    popPwdChange(value) {
      if (!value.show) uni.redirectTo({
        url: '/pages-worker/result?type=error&id=' + this.paymentForm.order_id
      });
    },
    _showInit() {
      let deliverTime = generateRangesUntilMidnight(false, (1000 * 60 * 70))[0]
      let deliverDate = formatDateCustom()
      this.$set(this.form, 'deliver_date', deliverDate)
      this.$set(this.form, 'deliver_time', deliverTime)
      uni.getStorage({
        key: 'dzb',
        success: res => {
          if (res.data) {
            let dzb = JSON.parse(res.data)
            if (dzb && dzb['type-' + 'S-' + this.routeQuery.type]) {
              this.form = Object.assign({}, dzb['type-' + 'S-' + this.routeQuery.type], this.form)
              this._typeform()
            }
          }
        }
      });
      this._typeform()
      this.$nextTick(() => {
        this._calculateFee()
      })
    },

    qjsjTap() {
      this.copyForm = JSON.parse(JSON.stringify(this.form))
      this.$refs.popup1.open();
      this.$nextTick(() => {
        this.$refs.timePopupVue._initTime(5, '及时上门')
        this.$refs.timePopupVue._initPage({
          deliverTime: this.form.deliver_time,
          deliverDate: this.form.deliver_date
        })
      })
    },
    showTime() {
      let el = this.$refs.timePopupVue
      let text = '及时上门'
      if (el && el['timeList'][el['dateIndex']]) {
        let timeList = el['timeList']
        let dateIndex = el['dateIndex']
        let timeIndex = el['timeIndex']
        let date = el['timeList'][el['dateIndex']]
        this.$set(this.form, 'deliver_date', date['desc'])
        if (timeList[dateIndex].childrens[timeIndex].name === text) { } else {
          text = timeList[dateIndex].name + ' ' + timeList[dateIndex].childrens[timeIndex].name
        }
        return {
          text: text,
          deliver_time: timeList[dateIndex].childrens[timeIndex].desc,
          deliver_date: date['desc']
        }
      }
    },
    // 确认取件时间
    timeTap() {
      let {
        deliver_time,
        deliver_date,
        text
      } = this.showTime()
      this.$set(this.form, 'showTimeText', text)
      this.$set(this.form, 'deliver_time', deliver_time)
      this.$set(this.form, 'deliver_date', deliver_date)
      this.copyForm = JSON.parse(JSON.stringify(this.form))
      this._calculateFee()
      this.$refs.popup1.close();
    },
    // 取件时间点击模态框关闭处理
    closeChange() {
      this.$set(this.form, 'deliver_time', this.copyForm.deliver_time)
      this.$set(this.form, 'deliver_date', this.copyForm.deliver_date)
    },
    _typeform() {
      uni.getStorage({
        key: 'typeForm',
        success: res => {
          if (res.data) {
            let form = JSON.parse(res.data)
            this.$set(this.form, 'remarks', form.remarks)
            this.$set(this.form, 'describe', form.describe)
            this.$set(this.form, 'bounty', form.bounty)
            if (form.deliver_date) this.$set(this.form, 'deliver_date', form.deliver_date)
            if (form.deliver_time) this.$set(this.form, 'deliver_time', form.deliver_time)
            if (form.fileList?.length) this.fileList = form.fileList
          }
        }
      });
    },
    submitOrderTap() {
      this.$set(this.paymentForm, 'order_id', null)
      this.$set(this.paymentForm, 'pay_type', null)
      this.$set(this.paymentForm, 'password', null)
      if (!this.form.describe) return uni.$uv.toast('请填写需求信息')
      if (!this.form.latitude) return uni.$uv.toast('请填写服务地址')
      if (!this.chooseFlag) return uni.$uv.toast('请勾选《邻事通帮送协议》')
      this._calculateFee(() => {
        let delivery_address = {
          delivery_address_name: this.form.name,
          delivery_address_tel: this.form.tel,
          delivery_address_province: this.form.province,
          delivery_address_city: this.form.city,
          delivery_address_area: this.form.area,
          delivery_address_town: this.form.town,
          delivery_address_address: this.form.address,
          delivery_address_storey: this.form.storey,
          delivery_address_house_number: this.form.house_number,
          delivery_address_lat: this.form.latitude,
          delivery_address_lng: this.form.longitude
        }
        let data = {
          type: this.routeQuery.type,
          remarks: this.form.remarks,
          deliver_date: this.form.deliver_date,
          deliver_time: this.form.deliver_time,
          describe: this.form.describe,
          bounty: this.form.bounty || 0,
          order_price: this.totalPrice,
          time_slot_price: this.form.time_slot_price,
          basic_price: this.form.basic_price,
          is_pick_up_immediately: this.form.showTimeText && this.form.showTimeText != '及时上门' ? 0 : 1
        }
        let form = Object.assign({}, delivery_address, data)
        if (this.fileList.length) form.goods_img = this.fileList.map(i => i.url)
        uni.showLoading({
          title: '提交订单中',
          mask: true
        })
        neighborWorkerProfileCreateOrder(form).then(res => {
          uni.hideLoading()
          if (res.code === 200) this.payTypeClick({
            id: res.result,
            order_price: (Number(this.form.orderPrice) || 0) + (Number(this.form.bounty) || 0)
          })
        })
      })
    },

    payOrderFun() {
      uni.redirectTo({
        url: '/pages-worker/result?type=success&id=' + this.paymentForm.order_id
      });
    },
    afterRead(file) {
      uni.showLoading({
        title: '上传中',
        mask: true
      })
      uploadImage({
        name: 'file',
        filePath: file.file.thumb
      }).then(res => {
        uni.hideLoading()
        if (res.code === 0) this.fileList.push({
          url: res.data
        })
      })
    },
    deletePic(item) {
      this.fileList.splice(item.index, 1)
    },

    // 是否勾选协议
    isChooseChange(value) {
      this.chooseFlag = value
    },
    // 点击协议
    xyClick() {
      let form = JSON.parse(JSON.stringify(this.form))
      form.fileList = this.fileList
      uni.setStorage({
        key: 'typeForm',
        data: JSON.stringify(form)
      });
      wx.navigateTo({
        url: '/pages-worker/lgxy?type=' + this.routeQuery.type + '&t=4'
      });
    },
    _calculateFee(cb = () => { }) {
      let form = {
        type: this.routeQuery.type,
        delivery_address_lat: this.form.latitude || '',
        delivery_address_lng: this.form.longitude || '',
      }
      calculateFee(form).then(res => {
        if (res.code === 200) {
          this.$set(this.form, 'orderPrice', res.result.order_price)
          this.$set(this.form, 'time_slot_price', res.result.time_slot_price)
          this.$set(this.form, 'basic_price', res.result.basic_price)
          cb()
        }
      })
    },

    backTap() {
      uni.navigateBack({
        delta: getCurrentPages().length
      });
    },
    dzbTab(item) {
      let form = JSON.parse(JSON.stringify(this.form))
      form.fileList = this.fileList
      uni.setStorage({
        key: 'typeForm',
        data: JSON.stringify(form)
      });
      uni.navigateTo({
        url: '/pages-user/address?type=' + this.routeQuery.type + '&dzb=S&t=4'
      });
    },

    keyboardConfirm(value) {
      this.$set(this.form, 'bounty', value)
    },
  },
}
</script>

<style lang="scss">
.p1755226278 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 32rpx !important;
  margin-top: 20rpx !important;
}
</style><style lang="scss" scoped>
@import "./common.scss";

.p1755939371 {
  white-space: nowrap;
}

.p1755847659 {
  width: 50rpx;
  min-width: 50rpx;
  height: 50rpx;
}

.p1755225391 {
  color: #333333;
  min-height: 100vh;
  background-color: #f7f5f8;

  .bg {
    top: 0;
    left: 0;
    position: absolute;
    min-height: 44vh;
    z-index: 1;
  }

  .p1755249368 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7f5f8;
    justify-content: center;
    border-radius: 10rpx;
    width: 180rpx;
    height: 180rpx;
  }

  .p1755248415 {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    margin-top: 20rpx;
    box-shadow: 4rpx 3rpx 3rpx 0rpx #eeeeee;
    border-radius: 10rpx;
  }

  .p1755227512 {
    padding: 0 30rpx 30rpx 30rpx;
    position: relative;
    z-index: 2;
    height: 100%;
    overflow-y: auto;
  }

  .p1755227896.active {
    border-color: #de0012;
    background: #ffebec;
  }

  .p1755235396,
  .p1755229431,
  .p1755226696 {
    background: #fff;
    padding: 30rpx 30rpx 30rpx 30rpx;
    box-shadow: 4rpx 3rpx 3rpx 0rpx #eeeeee;
    border-radius: 10rpx;

    margin-top: 30rpx;
  }

  .p1755152277 {
    width: 220rpx;
    height: 80rpx;
    background: #de0012;
    border-radius: 50rpx;
    font-weight: 600;
    font-size: 30rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p1755570852 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 30rpx;
    width: 100vw;
    bottom: 0;
    box-shadow: 4rpx 0rpx 5rpx 5rpx #eee;
    z-index: 5;
    box-sizing: border-box;
    height: 146rpx;
  }

  .p1755227896 {
    position: relative;
    height: 68rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 2rpx solid #cccccc;
    overflow: hidden;
    width: 50%;
  }

  .p1755227896:nth-child(1) {
    margin-right: 10rpx;
  }

  .p1755227896:nth-child(2) {
    margin-left: 10rpx;
  }

  .p1755227808 {
    justify-content: center;
    width: 40rpx;
    height: 30rpx;
    background: #de0012;
    border-radius: 10rpx 0 0 0;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;

    .text {
      font-weight: 600;
      font-size: 38rpx;
      color: #333333;
      padding-left: 30rpx;
    }
  }

  .p1755235189 {
    padding-left: 3rpx;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
  }

  .p1755235320 {
    height: 30rpx;
    margin-right: 10rpx;
  }

  .dzb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    min-width: 100rpx;
    height: 50rpx;
    font-size: 24rpx;
    color: #818181;
    border: 2rpx solid #c1c2c2;
    border-radius: 40rpx;
  }

  .showText {
    width: 60vw;
    box-sizing: border-box;
  }

  .pay-pop {
    width: 80vw;
    min-width: 80vw;
    background-color: #fff;
    padding-left: 40rpx;
    padding-right: 40rpx;
    box-sizing: border-box;
    padding-bottom: 80rpx;

    .p1755763657 {
      font-weight: 500;
      font-size: 32rpx;
      text-align: center;
      padding-top: 30rpx;
      padding-bottom: 50rpx;
    }

    .p1755763837 {
      padding-bottom: 50rpx;
    }
  }
}

.p1756879768 {
  flex-direction: column;
  border: 2rpx solid #c7c7c7;
  border-radius: 10rpx;
  width: calc(33.3333vw - 55rpx);
  height: calc(33.3333vw - 55rpx);
}
</style>
